<template>
  <div>
    <a-button type="primary" style="margin-bottom: 20px" @click="add()"
      >新增分类</a-button
    >
    <a-table
      size="small"
      :columns="columns"
      :data-source="categoryList"
      :rowKey="(item) => item.id"
    >
      <template slot="edit" slot-scope="record">
        <a-space>
          <a-button @click="setModalVisible(record)">编辑</a-button>
          <a-popconfirm
            title="确认删除该分类?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="remove(record.id)"
          >
            <a-button type="danger">删除</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
    <a-modal
      v-model="ediVisible"
      width="300px"
      :title="modal_title"
      ok-text="确认"
      cancel-text="取消"
      @ok="control()"
    >
      <a-input v-model="editForm.name"></a-input>
    </a-modal>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getCategoryList();
  },
  data() {
    return {
      categoryList: [],
      columns: [
        {
          title: "分类名称",
          align: "center",
          dataIndex: "name",
        },
        {
          title: "操作",
          scopedSlots: { customRender: "edit" },
          align: "center",
        },
      ],
      ediVisible: false,
      modal_title: "编辑分类",
      editForm: {
        id: "",
        name: "",
      },
    };
  },
  methods: {
    // 获取分类列表
    getCategoryList() {
      this.$axios.get("/api/category/list.php").then((res) => {
        const { data } = res;

        if (data.code === 1) {
          this.categoryList = data.data.map((item) => {
            return {
              id: item[0],
              name: item[1],
            };
          });
          this.$message.success(data.msg);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 设置可见
    setModalVisible(record) {
      this.ediVisible = true;
      this.editForm = {
        id: record.id,
        name: record.name,
      };
    },
    // 控制编辑 或 新增
    control() {
      if (this.editForm.name.trim() === "") {
        return this.$message.error("分类名称不能为空");
      }
      const type = this.editForm.id ? "edit" : "add";

      if (type === "add") {
        this.$axios
          .post("/api/category/add.php", { category: this.editForm.name })
          .then((res) => {
            const { data } = res;
            if (data.code === 1) {
              this.getCategoryList();
              this.ediVisible = false;
              this.$message.success(data.msg);
            } else {
              this.$message.error(data.msg);
            }
          });
      } else {
        this.$axios
          .post("/api/category/rename.php", this.editForm)
          .then((res) => {
            const { data } = res;
            if (data.code === 1) {
              this.getCategoryList();
              this.ediVisible = false;
              this.$message.success(data.msg);
            } else {
              this.$message.error(data.msg);
            }
          });
      }
    },
    // 删除
    remove(id) {
      this.$axios.post("/api/category/remove.php", { id }).then((res) => {
        if (res.data.code === 1) {
          this.$message.success(res.data.msg);
          this.getCategoryList();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 新增分类
    add() {
      this.modal_title = "新增分类";
      this.ediVisible = true;
      this.editForm.name = "";
    },
  },
};
</script>

<style></style>
